<template>
    <div class="root" @scroll='listScroll'>
        <!--加载中-->
        <p v-if="dataState == 'loading'" style="text-align: center;">
            <span class='fa fa-refresh fa-spin fa-3x'></span>
        </p>
        <!--网络连接超时-->
        <p v-if="dataState == 'fail'">
            网络出问题了
        </p>
        <div class='list'>
            <RoomItem v-for="(r,i) in rooms" :room='r' :key='i'></RoomItem>
        </div>
        <p v-if="rooms.length>0">
            <span class='fa fa-spinner fa-spin fa-3x'></span>
        </p>
    </div>
</template>

<script>    
import RoomItem from './RoomItem'
export default {
    props:['rooms','dataState'],
    components:{
        RoomItem,
    },
    methods:{
        listScroll(e){
            if(e.target.scrollHeight-e.target.clientHeight-100<=e.target.scrollTop){
                this.$emit('requestMore')
            }
        }
    }
}
</script>

<style scoped>
.root{
    height: calc(100vh - 50px);
    overflow: scroll;
}
.list{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
p{
    text-align: center;
}
</style>